<template>
  <div class="oil_bind_card">
    <c-title :hide="false" text="IC卡"></c-title>
    <div class="cellBox">
      <van-cell-group :border="false">
        <van-field v-model="card_num" label="卡号" placeholder="请输入卡号" required />
        <van-field v-model="full_name" label="姓名" placeholder="请输入姓名" required />
        <van-field v-model="mobile" label="手机号" placeholder="请输入手机号" required />
      </van-cell-group>
    </div>
    <div class="buttonBox set-pc-style">
      <div class="btn" @click="bindCard">绑定</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      card_num: "",
      mobile: "",
      full_name: ""
    };
  },
  activated() {},
  methods: {
    async bindCard() {
      if (this.fun.isTextEmpty(this.card_num)) {
        this.$toast("请输入卡号");
        return;
      }
      if (this.fun.isTextEmpty(this.full_name)) {
        this.$toast("请输入姓名");
        return;
      }
      if (this.fun.isTextEmpty(this.mobile)) {
        this.$toast("请输入手机号");
        return;
      }
      let json = {
        card_num: this.card_num,
        mobile: this.mobile,
        full_name: this.full_name
      };
      let { data, msg, result } = await $http.post("plugin.oil-card.frontend.oil-card-manage.bind-card", json, "");
      if (result) {
        this.$toast(msg);
        this.$router.go(-1);
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.cellBox {
  margin: 0.63rem 0.75rem;
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 0.5rem;
}
.buttonBox {
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 0.63rem 0.75rem;
  box-sizing: border-box;
  width: 100%;
  .btn {
    width: 100%;
    background: #f15353;
    border-radius: 1.28rem;
    height: 2.5rem;
    text-align: center;
    line-height: 2.5rem;
    font-weight: 500;
    font-size: 0.94rem;
    color: #ffffff;
  }
}
</style>
